<template>
  <div class="order-detail-page" v-if="order">
    <!-- 操作栏 -->
    <DetailAction :order="order" />
    <!-- 步骤条-->
    <XtxSteps
      :active="order.orderState === 6 ? 1 : order.orderState"
      style="padding: 20px;"
    >
      <XtxStepsItem title="提交订单" :desc="order.createTime" />
      <XtxStepsItem
        title="付款成功"
        :desc="order.payTime"
      />
      <XtxStepsItem title="商品发货" :desc="order.consignTime" />
      <XtxStepsItem title="确认收货" :desc="order.endTime" />
      <XtxStepsItem title="订单完成" :desc="order.evaluationTime" />
    </XtxSteps>
    <!-- 物流栏 -->
    <Suspense v-if="[3, 4, 5].includes(order.orderState)">
      <!-- 加载完毕 -->
      <detail-logistics :order="order" />
      <!-- 组件加载中 -->
      <template #fallback>
        <div class="loading">loading</div>
      </template>
    </Suspense>
    <!-- 订单商品信息 -->
    <detail-info :order="order" />
  </div>
</template>
<script setup>
import { findOrder } from '@/api/order'
import { ref } from '@vue/reactivity'
import { Suspense } from 'vue'
import { useRoute } from 'vue-router'
import DetailAction from './components/detail-action'
import DetailInfo from './components/detail-info.vue'
import DetailLogistics from './components/detail-logistics.vue'

const order = ref(null)
const route = useRoute()
findOrder(route.params.id).then((data) => {
  order.value = data.result
})
</script>
<style scoped lang="less">
.order-detail-page {
  background: #fff;
  min-height: 800px;
}
.loading {
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 30px;
  background-color: #f5f5f5;
  margin: 30px 50px 0;
}
</style>
